<template>
    <div class="authorityConfig">
        <el-card>
            <div class="form_wrap">
                <el-form ref="form" :rules="rules" :model="formData" label-width="80px">
                    <el-form-item label="角色" prop="role_id" v-if="!isTeacher">
                        <el-select v-model="formData.id" placeholder="请选择角色" @change="changeRole" disabled>
                            <el-option
                                v-for="item in roleList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="权限">
                        <link-tree
                            :data="treeData"
                            :show-checkbox="false"
                            node-key="name"
                            ref="tree"
                            :default-expand-all="true"
                            :check-on-click-node="true"
                            :default-checked-keys="checkedData"
                            :props="defaultProps"
                            :expand-on-click-node="false"
                            @current-change="checkTreeItem">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span >{{ node.label }}</span>
                                <span>
                                    <el-checkbox-group v-model="data.checkedList" @change="selectRight(node, data)">
                                        <el-checkbox v-for="right in data.rights" :label="right.value" :key="right.value">{{right.label}}</el-checkbox>
                                    </el-checkbox-group>
                                </span>
                            </span>
                        </link-tree>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" @click="handleCancel">取 消</el-button>
                        <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import http from '@/api/role'
import teacherAPI from '@/api/teacher'

import linkTree from '@/components/tree'
export default {
    name: 'authorityConfig',
    components: {
        linkTree
    },
    data() {
        return {
            formData: {
                color: '#000'
            },
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            checkedData: [],    // 默认选中的内容
            
            checkedBtnPermissions: {},          // 按钮权限是否选中
            roleList: [],
            rules: {
                role_id: [
                    { required: true, message: '请选择角色' }
                ],
                describe: [
                    { required: true, message: '请输入描述内容' }
                ]
            },
            isTeacher: false,   // 用于辨别是否是教师权限
            http: http,
        }
    },
    methods: {
        goToURL(name,params){
            this.$router.push({name, params});
        },
        // 切换角色
        changeRole(role_id){
            console.log('role_id:',role_id)
            console.log('this.formData:',this.formData)
        },

        // 获取详情
        getContentDetail(id){
            this.http.getContentDetail({id}).then(res=>{
                this.formData = res.data;
                if(this.formData.password){
                    delete this.formData.password;
                }
                if(res.data.rules){
                    this.checkedBtnPermissions = JSON.parse(res.data.rules);

                    // 初始化权限
                    this.treeData.map(item=>{
                        item.children.map(it=>{
                            if(this.checkedBtnPermissions[it.meta.api]){
                                it.checkedList = this.checkedBtnPermissions[it.meta.api];
                            }
                        })
                    })
                }
            })
        },
        getList(){
            http.getList().then(res=>{
                this.roleList = res.data.data;
            })
        },
        getPageParams(){
            if(Object.keys(this.$route.params).length){
                sessionStorage.setItem('authorityConfigParams',JSON.stringify(this.$route.params))
            }

            let pageParams = sessionStorage.getItem('authorityConfigParams');
            if(pageParams){
                pageParams = JSON.parse(pageParams);

                if(!pageParams.role){
                    this.getList();
                } 

                if(pageParams.role == 'teacher'){
                    this.isTeacher = true;
                    this.http = teacherAPI;
                } 

                if(pageParams.role_id){
                    this.getContentDetail(pageParams.role_id);
                    this.$set(this.formData,'id',pageParams.role_id);
                }
            }
        },

        // 选择权限
        selectRight(node, data){
            console.log('node, data:',node, data);
            this.checkedBtnPermissions[data.meta.api] = data.checkedList;
        },
        handleCancel(){
            this.$router.go(-1);
        },
        handleSubmit(){
            let arr = this.$refs.tree.getCheckedKeys();

            console.log('this.treeData:',this.treeData);
            console.log('this.checkedBtnPermissions:',this.checkedBtnPermissions);
            
            let data = JSON.parse(JSON.stringify(this.formData));
            data.rules = JSON.stringify(this.checkedBtnPermissions);

            
            this.http.editContent(data).then(res => {
                this.$message.success(res.msg || '编辑成功！');
                if(this.isTeacher){
                    this.$router.push({name:'teacherList'});
                } else {
                    this.$router.push({name:'authorityManage'});
                }
            })
        },
        checkTreeItem(aa,bb){
            console.log('checkTreeItem aa,bb:',aa,bb);

        },
    },
    created(){
        this.getPageParams();

        let routerData = JSON.parse(JSON.stringify(this.$router.options.routes));

        this.treeData = routerData.filter(item => {
            if(item.meta){
                item.label = item.meta.title;
                if(item.children){
                    let flag = item.children.filter(it=>{
                        it.label = it.meta.title;
                        
                        if(it.rights){
                            return true
                        } else {
                            return false
                        }
                    })
                    if(flag.length){
                        item.children = flag;
                        return true;
                    } else {
                        return false;
                    }
                } 
            } else {
                return false;
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.authorityConfig{
    height: 100%;
    padding: 10px 10px;
    box-sizing: border-box;
    overflow: auto;
    &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        cursor: pointer;
        background: #f1f1f1;
    }

    &::-moz-scrollbar {
        display: none;
    }
    &::-ms-scrollbar {
        display: none;
    }
    &::-o-scrollbar {
        display: none;
    }

    &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        width: 10px;
        cursor: pointer;
        background: #bbb;
    }
    &::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 0px;
        background: #f1f1f1;
    }
}
</style>

<style lang="scss">
    .custom-tree-node{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>